import React from 'react'
import { useEffect } from 'react'
import { useQuery } from '@tanstack/react-query'
import { Button } from 'antd'

import api from '../../api'


export default function UserList() {

  const {
    data: users,
    isLoading, 
    error,
    refetch
  } = useQuery({
    queryKey: ['users'],
    queryFn: api.fetchUsers
  })

  if (isLoading) {
    return (
      <div>
        IS Loading Users .....
      </div>
    )
  }

  if (error) {
    return (
      <div>
        <h3>Loading data error ..</h3>
      </div>
    )
  }

  return (
    <div>
      <Button onClick={() => refetch()}>重新加载数据</Button>
      <ul>
        {
          users.map(u => {
            return (
              <li key={u.id}>
                {u.name} -- {u.phone}
              </li>
            )
          })
        }
      </ul>
    </div>
  )
}
